<h3>Customize the coloring of your website</h3>
<?php if(null !== $this->v('data')):?>
<?php print formx();?>
	<table class="x">
	<?php $i = 0; foreach ($this->v('data') AS $selector => $rule):?>
	  <tr>
	    <th colspan=2><?php print $selector.input('hidden','colors['.$i.'][_name_]',htmlspecialchars($selector,ENT_QUOTES));?></th>
	  </tr>
	  <?php foreach ($rule AS $key => $value):?>
	  <tr>
	  	<td><b><?php print $key;?></b><br/><span class="small">Hexadecimal value</span></td>
	  	<td>#<?php print input('text','colors['.$i.']['.$key.']',$value,array('style'=>'width:90%;','class'=>'color'));?></td>
	  </tr>
	  <?php endforeach;?>
	<?php $i++; endforeach;?>
	</table>
<?php print submit('Update').form(true);?>
<script type="text/javascript">
//<!--
	jQuery(document).ready(function(){
		jQuery('.color').ColorPicker({
			onSubmit: function(hsb, hex, rgb, el) {
				$(el).val(hex);
				$(el).ColorPickerHide();
			},
			onBeforeShow: function () {
				$(this).ColorPickerSetColor(this.value);
			}
		});
	});
//-->
</script>
<?php else:?>
<p>You have not marked any CSS color rules with <b>/***/</b>.<br/>
<i>Colors must be expressed as hexa (#000000).</i></p>
<?php endif;?>